<template>
    <div>
        <div class="fixd">
        <div class="personal">
            <div class="logo"><img src="./../../assets/img/userlogo.jpg"></div>
            <p>{{username}}</p>
        </div>   
        <div class="category">
            <div :class="showindex==index?'ztcateed':'ztcate'" v-for="(cate,index) in categorys" :key="index"  @click="getcate(index,cate.code)">{{cate.name}}</div>
        </div>
        </div>
        <div class="orderitem" v-if="temparr">
            <div class="ietms" v-for="(item,index) in temparr" :key="index">
                <div class="deleted"><div class="iconvan"><van-icon name="delete" size="30" /></div></div>
                <div class="ietmdetail">
                    <img :src="item.product_image">
                    <p>{{item.product_name}}</p>
                    <p>￥{{item.payment}}</p>
                </div>
                <div class="action">
                    <div class="buy">再次购买</div>
                </div>
            </div>
        </div>
        <div class="else" v-else>
            <p>暂无商品数据</p>
        </div>
    </div>
</template>
<script>
export default {
    name:"me",
    data(){
        return{
            categorys:[
                {name:"已取消",code:0},
                {name:"未付款",code:10},
                {name:"已付款",code:20},
                {name:"已发货",code:40},
            ],
            showindex:2,
            code:20,       ///初始化订单类型
            username:localStorage.getItem("username"),
            temparr:[],   //临时订单数组
        }
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            ///初始化数据
            let data={
                userid:localStorage.getItem("userid"),
                status:this.code
            }
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/personaldata',
                data:data
            }).then((res)=>{
                this.temparr = res.data.data
            })
        },
        getcate(e,code){
             ///初始化数据
            let data={
                userid:localStorage.getItem("userid"),
                status:code
            }
            this.$http({
                method:"post",
                url:this.$util.baseUrl+'app/personaldata',
                data:data
            }).then((res)=>{
                this.temparr = res.data.data
                this.showindex = e;
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .fixd{
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 999;
    }
    .personal{
        width: 100%;
        height: 400px;
        background: #cccccc;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .logo{
            width: 250px;
            height: 250px;
            border-radius: 50%;
            img{
                width: 250px;
                height: 250px;
                border-radius: 50%;
            }
        }
        p{
            font-size: 40px;
            font-weight: 700;
            margin-top: 25px;
        }
    }
    .category{
        width: 100%;
        height: 100px;
        background: #CC6633;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .ztcate{
           width: 20%;
           height: 100px; 
           text-align: center;
           line-height: 100px;
           font-size: 35px;
           font-weight: 800;
        }
        .ztcateed{
           width: 20%;
           height: 100px; 
           text-align: center;
           line-height: 100px;
           font-size: 35px;
           font-weight: 800;
           color: white;
           border-bottom:10px solid #CC3333; 
        }
    }
    .orderitem{
        width: 100%;
        background: #cccccc;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        margin-top: 500px;
        .ietms{
            width: 90%;
            height: 350px;
            border-radius: 30px;
            background: white;
            margin: auto;
            margin-top: 30px;
            margin-bottom: 30px;
            .deleted{
                display: flex;
                justify-content: flex-end;
                .iconvan{
                    width: 70px;
                    height: 70px;
                    margin-top: 20px;
                    margin-right: 50px;
                    background: #cccccc;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .ietmdetail{
                display: flex;
                justify-content: space-around;
                align-items: center;
                img{
                    width: 250px;
                    height: 150px;
                }
                p{
                    font-size: 35px;
                    font-weight: 700;
                }
            }
            .action{
                width:100%;
                height: 100px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                div{
                    width: 150px;
                    height: 60px;
                    font-size: 30px;
                    color: #CC3333;
                    border: 1px solid #CC3333;
                    border-radius: 40px;
                    text-align: center;
                    line-height: 60px;
                    margin-right: 50px;
                }
            }
        }
        .ietms:last-child{
            margin-bottom: 160px;
        }
    }
    .else{
        font-size: 40px;
        margin-top: 600px;
        p{
            margin: auto;
             margin-top: 150px;
               text-align: center;
        }
    }
</style>